import React, { PureComponent, Fragment } from 'react';
import { Table, Alert } from 'antd';
import styles from './index.less';

class StandardTable extends PureComponent {
  constructor(props) {
    super(props);
    const { columns } = props;

    this.state = {
      selectedRowKeys: [],
    };
  }

  componentWillReceiveProps(nextProps) {
    // clean state
    // if(nextProps.data.length > 0){
    //   let needTotalList = [...this.state.needTotalList];
    //   needTotalList = needTotalList.map(item => {
    //     return {
    //       ...item,
    //       total: nextProps.data.reduce((sum, val) => {
    //         return sum + parseFloat(val[item.dataIndex], 10);
    //       }, 0),
    //     };
    //   });
    //   this.setState({
    //     needTotalList,
    //   });
    // }
    // if (nextProps.selectedRows.length === 0) {
    //   const needTotalList = initTotalList(nextProps.columns);
    //   this.setState({
    //     selectedRowKeys: [],
    //     needTotalList,
    //   });
    // }
  }

  handleTableChange = (pagination, filters, sorter) => {
    this.props.onChange(pagination, filters, sorter);
  };

  cleanSelectedKeys = () => {
    this.handleRowSelectChange([], []);
  };

  render() {
    const { data, loading, columns, rowKey, selectedRowKeys, totalPrice, handleRowSelectChange } = this.props;

    const rowSelection = {
      selectedRowKeys,
      onChange: handleRowSelectChange,
    };

    return (
      <div className={styles.standardTable}>
        <div className={styles.tableAlert}
             style={{marginTop:16}}
        >
          <Alert
            message={
              <Fragment>
                已选择 <a style={{ fontWeight: 600 }}>{selectedRowKeys.length}</a> 项&nbsp;&nbsp;
                <span style={{ marginLeft: 8 }} >
                    总计&nbsp;
                  <span style={{ fontWeight: 600 }}>
                      {totalPrice.toFixed(2)}
                    </span>
                  </span>
              </Fragment>
            }
            type="info"
            showIcon
          />
        </div>
        <Table
          rowKey={rowKey || 'id'}
          bordered={true}
          loading={loading}
          dataSource={data}
          columns={columns}
          pagination={false}
          onChange={this.handleTableChange}
          defaultExpandAllRows={true}
          rowSelection={rowSelection}
        />
        <div className={styles.tableAlert}
             style={{marginTop:16}}
        >
          <Alert
            message={
              <Fragment>
                已选择 <a style={{ fontWeight: 600 }}>{selectedRowKeys.length}</a> 项&nbsp;&nbsp;
                <span style={{ marginLeft: 8 }} >
                    总计&nbsp;
                  <span style={{ fontWeight: 600 }}>
                      {totalPrice.toFixed(2)}
                    </span>
                  </span>
              </Fragment>
            }
            type="info"
            showIcon
          />
        </div>
      </div>
    );
  }
}

export default StandardTable;
